<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>誉禾植物店</title>
  <!-- bootstrap样式 -->
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <!-- element-ui的样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- vue2框架的js和emenet-ui的js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 可以发送jquery请求 -->
  <script src="../js/jquery.min.js"></script>
  <!-- bootstrap框架 -->
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <!-- js动画 -->
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
  <!-- 用于发送请求 -->
  <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<!-- 购物车 -->
<style>
  @media (min-width: 1200px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
      max-width: 1200px;
    }
  }
</style>

<body>
  <div id="shop">
    <!-- 网页头部 -->
    <header>
      <iframe src="./header.html" height="110px" width="100%" frameborder="0"></iframe>
    </header>
    <!-- 购物车 -->
    <section style="margin: 3%;">
      <div class="container">
        <div>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="goodsName" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="goodsLanguage" label="花语" width="180">
            </el-table-column>
            <el-table-column label="图片" width="180">
              <template slot-scope="scope">
                <img :src="url+'/download/'+scope.row.goodsImg" width="80px" height="80px" alt="">
              </template>
            </el-table-column>
            <el-table-column label="数量">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.count" @change="handleChange(scope.row)" :min="1"
                  :max="10"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="价格">
              <template slot-scope="scope">
                <span>{{ scope.row.price * scope.row.count }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="display: flex;margin-top: 2%;">
            <div style="margin-left: auto;">
              <el-button type="success" @click="pay()" plain>全部付款</el-button>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</body>
<script>
  new Vue({
    el: '#shop',
    data() {
      return {
        tableData: [],
        url: 'http://localhost:9081/common',
        shopForm: {},
        flag: false
      }
    },
    created() {
      if (localStorage.getItem("userId") == null) {
        window.location.href = './login.html';
        return;
      }
      this.page_init();
    },
    methods: {
      // 初始化
      async page_init() {
        const { data: result } = await this.$http.get("http://localhost:9081/plants_shop/shop_user/" + localStorage.getItem("userId"));
        if (result.flag) {
          this.tableData = result.list;
        }
      },
      // 付款
      async pay() {
        for (let i = 0; i < this.tableData.length; i++) {
          this.shopForm.uid = this.tableData[i].uid;
          this.shopForm.gid = this.tableData[i].gid;
          this.shopForm.goodsImg = this.tableData[i].goodsImg;
          this.shopForm.price = this.tableData[i].price * this.tableData[i].count;
          this.shopForm.count = this.tableData[i].count;
          this.shopForm.goodsName = this.tableData[i].goodsName;
          const { data: result } = await this.$http.post("http://localhost:9081/plants_orders/insert_shop",this.shopForm);
          if (result.flag) {
            this.shopForm = {}
          }else {
            return;
            this.flag = true;
          }
        }
        if (this.flag) {
          this.$message.error("部分商品付款失败，请稍后重试！");
        }else {
          this.$message.success("购买成功！");
          this.tableData = []
          this.page_init();
          this.flag = false;
        }

      },
      // 删除
      async handleDelete(row) {
        const { data: result } = await this.$http.get("http://localhost:9081/plants_shop/delete/" + row.id);
        if (result.flag) {
          this.page_init();
        }
      },
      // 修改数量
      async handleChange(value) {
        const { data: result } = await this.$http.post("http://localhost:9081/plants_shop/update", value);
        if (result.flag) {
          return;
        }
      },
    }
  })
</script>

</html>